window.main = () => {
  // 先初始化 Point
  window.pointLocation = window.initPointer()
  const socket = io.connect('//');
  // 区域组件
  Vue.component('area-order', {
    data:() =>({
      areaList: []
    }),
    template: document.querySelector('#area-order'),
    mounted(){
      const areaSort = ['长沙区域','武汉区域','南昌区域','广州区域','成都区域','重庆区域','西安区域','贵州区域', '河南区域'];
      socket.on('sold_area_gmv',  (data) => {
        const gmvlist = data.map(it=>({
          name: it.areaname,
          amont: Math.round(it.支付订单数),
          value: Math.round(it.支付订单金额)
        })).filter(it=>{
          return areaSort.indexOf(it.name) >= 0;
        }).sort((a, b)=>{
          return areaSort.indexOf(a.name) - areaSort.indexOf(b.name);
        });
        const gmvpie = echarts.init(document.getElementById('c1'));
        this.areaList = gmvlist;
        // 更新饼图
        window.renderAreaGMV(gmvpie, gmvlist.map(it=>({name:it.name, value:it.value})));
      });
    }
  })
  // 数字组件
  Vue.component('animate-number', {
    data(){
      return {
        nowNumer: this.number || this.initial || 0,
      };
    },
    props: ['initial','number', 'duration', 'splitk'],
    template: document.querySelector('#animate-number'),
    mounted(){
    },
    methods:{

    },
    watch:{
      number(v, oldv){
        // debugger
        // splitK
        const d = ~~v - ~~oldv;
        const now = Date.now();
        if(!d) return;
        const duration = ~~oldv === 0 ? 3000: this.duration;
        const run = () =>{
          let per = (Date.now() - now) / duration;
          per = Math.min(1, per);
          // debugger
          if(per < 1){
            // debugger
            const dv = Math.round(d * per);
            const nowNumer = ~~oldv + ~~dv;
            this.nowNumer = this.splitk ? splitK(nowNumer): nowNumer;
            requestAnimationFrame(run)
          }
        };
        run();
      }
    }
  })

  /**
   * 根节点
   */
  new Vue({
    el: '.data-board',
    data: {
      orderCount: "--",
      todayGMV: "--",
    },
    mounted(){
      const soldOutPie = echarts.init(document.getElementById('c2'))
      // 更新饼图
      window.renderSoldOutRate(soldOutPie, 0);

      // // 打点
      // var i = 1000;
      // while (i-->0){
      //     [1, 2, 3, 4, 5, , , , , ,].map(it => {
      //         const lng = 108 + Math.random() * 10 - 0.4;
      //         const lat = 28 + Math.random() * 10 + 0.005;
      //         pointLocation(lng, lat)
      //     });
      // }
      socket.on('sold_out_rate', function (data) {
        window.renderSoldOutRate(soldOutPie, data);
      });
      socket.on('sold_area_gmv', (data) => {
        // debugger
        this.todayGMV = Math.round(data.map(it=>it.支付订单金额).reduce((a, b)=>{
          return a + b;
        }, 0));
        this.orderCount = Math.round(data.map(it=>it.支付订单数).reduce((a, b)=>{
          return a + b;
        }, 0))
      });
      socket.on('order', function (data) {
        // console.log(data);
        const lng = 108 + Math.random() * 10 - 0.4;
        const lat = 28 + Math.random() * 10 + 0.005;
        pointLocation(data.经度|| lng, data.纬度||lat)
      });
      document.querySelector("#loading-mask").style.display = "none"; // 去除loading
    }
  });


  // 千位分隔符
  function splitK(num) {
    var decimal = String(num).split('.')[1] || '';//小数部分
    var tempArr = [];
    var revNumArr = String(num).split('.')[0].split("").reverse();//倒序
    for (i in revNumArr){
      tempArr.push(revNumArr[i]);
      if((i+1)%3 === 0 && ~~i !== revNumArr.length-1){
        tempArr.push(',');
      }
    }
    var zs = tempArr.reverse().join('');//整数部分
    return decimal?zs+'.'+decimal:zs;
  }
}
//398423
